import './index.scss'

import { memo } from 'react';
import type { ReactNode } from 'react'; 
import { CloseOutlined, ArrowLeftOutlined } from '@ant-design/icons';

interface ModalProps {
  visible: boolean;
  title: string;
  onClose: () => void;
  children: ReactNode;
  titleAlign?: 'left' | 'center';
  showBackButton?: boolean;
  onBack?: () => void;
  width?: number | string;
  className?: string;
}

const MyDialog = memo(({
  visible,
  title,
  onClose,
  children,
  titleAlign = 'center',
  showBackButton = false,
  onBack,
  width,
  className = '',
}: ModalProps) => {
  if (!visible) return null;

  return (
    <div className="modal-backdrop">
      <div 
        className={`modal-container ${className}`} 
        onClick={e => e.stopPropagation()}
        style={{ width: typeof width === 'number' ? `${width}px` : width }}
      >
        <div className="modal-header">
          {showBackButton && (
            <button title='返回' className="modal-back-button" onClick={onBack}>
              <ArrowLeftOutlined />
            </button>
          )}
          
          <h2 className={`modal-title ${titleAlign}`}>
            {title}
          </h2>
          
          <button title='关闭' className="modal-close-button" onClick={onClose}>
            <CloseOutlined />
          </button>
        </div>
        
        <div className="modal-content">
          {children}
        </div>
      </div>
    </div>
  );
})

export default MyDialog